<template>
  <div class="container">
    <div class="header">
      <div class="header-left">
        <el-select v-model="statusValue" placeholder="请选择状态">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </div>
      <el-cascader
          size="large"
          :options="cityoptions"
          v-model="selectedOptions">
      </el-cascader>
      <el-input placeholder="请输入要搜索的活动" v-model="searchtext" style="width: 20rem; margin-left: 35rem;">
        <el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
      </el-input>
    </div>
    <div class="centercard">
      <div class="center-card" v-for="(item, index) in $store.state.newactivity" :key="index">
        <div class="top-img">
          <el-tag :type="getstatus(item.activity_status)" effect="dark" style="position: absolute; right: 10px; top: 10px;">{{getstatustext(item.activity_status)}}</el-tag>
          <img @click="toactivitydetail(index)" :src="item.activity_cover"/>
        </div>
        <div class="other">
          <div class="center-text">
            <!-- <div class="top-tiao"><el-progress :text-inside="true" :stroke-width="15" :percentage=Math.floor((item.activity_participator_num/item.activity_people_max_num)*100) status="warning"></el-progress></div> -->
            <el-progress :text-inside="true" :stroke-width="24"
                         :percentage="percent(item.activity_participator_num, item.activity_people_max_num)"
                         :format="format"
            ></el-progress>
            <div class="center-shuzi">
              <div class="shuzi-left">
                <span>已报名人数:</span>
                <p>{{ item.activity_participator_num }}</p>
              </div>
              <div class="shuzi-right">
                <span>需求人数:</span>
                <p>{{ item.activity_people_max_num }}</p>
              </div>
            </div>
          </div>
          <div class="buttom-text" @click="toactivitydetail(index)">
            <h2>{{ item.activity_name }}</h2>
            <div class="inputtime">
              <i class="el-icon-time"></i>
              <span>{{ item.activity_begin_time.slice(0,10) }}</span>
              <span>-</span>
              <span>{{ item.activity_end_time.slice(0,10) }}</span>
            </div>
            <div class="inputtime">
              <i class="el-icon-s-data"></i>
              <span>{{ item.activity_score }}</span>
            </div>
            <div class="jieshaotext">
              <p><i class="el-icon-location" style="margin-right: 20px"></i>{{ item.activity_province + item.activity_city + item.activity_district }}</p>
              <div>
                <i class="el-icon-place" style="margin-right: 20px"></i>
                <span>{{ item.activity_address }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="block">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            layout="total, prev, pager, next, jumper"
            :total="pagesize * 3"
            :page-size="3"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {request} from '../api/axios.js';
import { CodeToText, regionDataPlus } from 'element-china-area-data';
export default {
  name: 'activity',
  created() {
    this.getallactivity();
  },
  computed: {
    // 改变活动标签状态
    getstatus() {
      return function (status) {
        if (status === '2') {
          return ''
        }
        if (status === '3') {
          return 'success'
        }
        if (status === '4') {
          return 'info'
        }
      }
    },
    getstatustext() {
      return function (status) {
        if (status === '2') {
          return '报名中'
        }
        if (status === '3') {
          return '活动中'
        }
        if (status === '4') {
          return '已结束'
        }
      }
    },
    // 计算已经报名的百分比
    percent() {
      return function (nownum, need) {
        return nownum / need * 100
      }
    }
  },
  watch: {
    selectedOptions() {
      this.uploadOptions = []
      this.selectedOptions.map(item =>{
        if (CodeToText[item] !== '全部') {
          this.uploadOptions.push(CodeToText[item])
        }
      })

      request({
        url: '/v1/activities/citysearchactivity',
        method: 'post',
        data: {
          page: this.currentPage1,
          search_rules: this.uploadOptions
        }
      }).then(res => {
        this.pagesize = res.data.pageNum
        this.$store.state.newactivity = res.data.data
        res.data.data.map(item => {
          item.activity_cover = this.$store.state.publicStaticPath + item.activity_cover
        })
      });
    },
    statusValue() {
      request({
        url: '/v1/activities/activitypage',
        method: 'post',
        data: {
          page: 1,
          choice_activity_status: this.statusValue
        }
      }).then(res => {
        console.log(res.data.data);
        this.pagesize = res.data.pageNum
        this.$store.state.newactivity = res.data.data
        res.data.data.map(item => {
          item.activity_cover = this.$store.state.publicStaticPath + item.activity_cover
        })
      });
    }
  },
  methods: {
    // 搜索请求
    toSearch() {
      request({
        url: '/v1/activities/searchactivity',
        method: 'post',
        data: {
          search_text: this.searchtext
        }
      }).then(res => {
        this.pagesize = 1
        this.$store.state.newactivity = res.data.data.slice(0,3)
        res.data.data.map(item => {
          item.activity_cover = this.$store.state.publicStaticPath + item.activity_cover
        })
      });

    },
    // 改变活动为满时的状态
    format(percentage) {
      return percentage === 100 ? '满' : `${percentage}%`;
    },
    // 获取活动
    getallactivity() {
      request({
        url: '/v1/activities/activitypage',
        method: 'post',
        data: {
          page: this.currentPage1,
          choice_activity_status: this.statusValue
        }
      }).then(res => {
        this.pagesize = res.data.pageNum
        this.$store.state.newactivity = res.data.data
        res.data.data.map(item => {
          item.activity_cover = this.$store.state.publicStaticPath + item.activity_cover
        })
      });
    },
    // 改变页码时
    handleCurrentChange(val) {
      this.currentPage1 = val
      if (this.uploadOptions.length !== 0) {
        request({
          url: '/v1/activities/citysearchactivity',
          method: 'post',
          data: {
            page: val,
            search_rules: this.uploadOptions
          }
        }).then(res => {
          this.pagesize = res.data.pageNum
          this.$store.state.newactivity = res.data.data
          res.data.data.map(item => {
            item.activity_cover = this.$store.state.publicStaticPath + item.activity_cover
          })
        });
      }
      else {
        request({
          url: '/v1/activities/activitypage',
          method: 'post',
          data: {
            page: val,
            choice_activity_status: this.statusValue
          }
        }).then(res => {
          this.$store.state.newactivity = res.data.data;
          res.data.data.map(item => {
            item.activity_cover = this.$store.state.publicStaticPath + item.activity_cover
          })
        });
      }
    },
    toactivitydetail(index) {
      let nowid = this.$store.state.newactivity[index].id;
      this.$store.dispatch('toActivityDetail', nowid);
      this.$router.push({
        path: '/activitydetail',
      });
    }
  },
  data() {
    return {
      // 城市级联选择
      cityoptions: regionDataPlus,
      selectedOptions: [],
      uploadOptions: [],
      // 搜索文本
      searchtext: '',
      currentPage1: 1,
      pagesize: 1,
      // 活动状态选择
      statusOptions: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '报名中'
        },
        {
          value: 2,
          label: '活动中'
        },
        {
          value: 3,
          label: '已结束'
        },
      ],
      statusValue: 0,
    };
  }
};
</script>

<style scoped>
.container {
  width: 100%;
}

.header {
  justify-content: flex-start;
  display: flex;
  margin: 4rem 0rem -4rem 8rem; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
}

.header .header-left {
  width: 8rem;
  margin-right: 2rem;
}

.header .header-right {
  width: 10rem;
  margin-right: 2rem;
}

.centercard {
  width: 100%;
  margin-top: 5rem;
}
.footer {
  margin: 0;
}
.footer .block {
  margin-left: 35rem;
  margin-bottom: -15rem;
}

.buttom-text .news-routerlink {
  text-decoration: none;
  color: white;
}

.centercard .top-img {
  position: relative;
  cursor: pointer;
}

.top-img img {
  height: 15rem;
  width: 100%;
  margin-left: -0.25rem;
}

.other {
  margin: 0;
}

.center-text {
  width: 100%;
}
</style>
